<template>
    <div class="padding20">
        <!--条件查询-->
        <el-form :model="queryParam" label-width="auto" size="small">
            <el-row :gutter="24" justify="start">
                <el-col :span="8">
                    <el-form-item label="与为儿法啊:">
                        <el-input v-model="queryParam.id" placeholder="账号"
                                  @keyup.enter.native="selectPage"/>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="昵称:">
                        <el-input v-model="queryParam.id" placeholder="昵称" @keyup.enter.native="selectPage"/>
                    </el-form-item>
                </el-col>
                <div v-if="showMoreSearch">
                    <el-col :span="8">
                        <el-form-item label="与为12儿法啊2:">
                            <el-input v-model="queryParam.id" placeholder="审批人"
                                      @keyup.enter.native="selectPage"/>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="与为玩1法啊:">
                            <el-input v-model="queryParam.id" placeholder="审批人"
                                      @keyup.enter.native="selectPage"/>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="审批33人:">
                            <el-input v-model="queryParam.id" placeholder="审批人"
                                      @keyup.enter.native="selectPage"/>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="审批33人:">
                            <el-input v-model="queryParam.id" placeholder="审批人"
                                      @keyup.enter.native="selectPage"/>
                        </el-form-item>
                    </el-col>
                </div>
                <!--展开/收起-->
                <el-col :span="showMoreSearch?24:8">
                    <div style="float: left;overflow: hidden;"
                         :style="showMoreSearch && { float: 'right', overflow: 'hidden' } || {} ">
                        <el-button size="small" @click="selectPage" type="primary">查询</el-button>
                        <el-button size="small" @click="selectPage">重置</el-button>
                        <a @click="showMoreSearch=!showMoreSearch"
                           style="margin-left: 8px ; font-size: 14px;color: #1890ff">
                            {{ showMoreSearch ? '收起' : '展开' }}
                            <i :class="showMoreSearch ? 'el-icon-arrow-up' : 'el-icon-arrow-down'"/>
                        </a>
                    </div>
                </el-col>
            </el-row>
        </el-form>

        <!--操作按钮-->
        <div class="mi-container">
            <el-button size="small" class="mi-item" type="primary" icon="el-icon-plus"
                       @click="go('UserInsert')">添加用户
            </el-button>
        </div>

        <!--表格数据-->
        <el-table :data="tableData"
                  border fit style="width: 100%;"
                  highlight-current-row show-overflow-tooltip
                  @selection-change="selectionChange">
            <el-table-column type="selection" width="55"/>
            <el-table-column type="index" label="序号" width="80"/>
            <el-table-column label="昵称" prop="name"/>
            <el-table-column label="账号" prop="account"/>
            <el-table-column label="手机号" prop="phone"/>
            <el-table-column label="注册时间" prop="createTime" width="170"/>
            <el-table-column label="最后登录时间" prop="loginTime" width="170"/>
            <el-table-column label="最后登录IP" prop="loginIp" width="120"/>
            <el-table-column label="操作" min-width="200" align="left">
                <template slot-scope="scope">
                    <el-button type="info" plain size="mini"
                               @click="go('UserInfo',{index:scope.$index,id:scope.row.id})">
                        详情
                    </el-button>
                    <el-button type="success" plain size="mini"
                               @click="go('UserEdit',{id:scope.row.id})">
                        编辑
                    </el-button>
                    <el-button
                            type="primary" plain
                            size="mini"
                            @click="showRestPassword(scope.$index, scope.row)">重置密码
                    </el-button>
                    <!--                    <el-button-->
                    <!--                            type="danger" plain-->
                    <!--                            size="mini"-->
                    <!--                            @click="showDelete(scope.$index, scope.row)">删除-->
                    <!--                    </el-button>-->
                </template>
            </el-table-column>
        </el-table>

        <!--分页插件-->
        <Pagination @pagination="selectPage"
                    v-show="queryParam.pages>0"
                    :total-data-num="queryParam.total"
                    :current-page="queryParam.current"
                    :page-size="queryParam.size"/>

    </div>
</template>

<script lang="ts">
    import {Component} from 'vue-property-decorator'
    import {API} from "@/aconst/API";
    import {mixins} from "vue-class-component";
    import BaseVue from "@/core/mixin/BaseVue";
    import Pagination from "@/components/Pagination/Pagination.vue";
    import Kit from "@/core/mixin/Kit";

    @Component({
        name: 'UserList',
        components: {
            Pagination
        },
    })
    export default class UserList extends mixins(BaseVue, Kit) {
        showMoreSearch: boolean = false;


        //初始化
        mounted() {
            this.selectPage();
        }

        //查询分页
        selectPage(page: any = null) {
            this.queryParam.id = 10;
            this.pageData(API.sysUserPage, page)
                .then((res: any) => {
                    console.log(res);
                })
        }

        //重新获取焦点
        activated() {
        }

        //失去焦点
        deactivated() {
        }


    }

</script>

<style scoped type="scss">
    .table-page-search-submitButtonso {
        display: block;
        margin-bottom: 24px;
        white-space: nowrap;
    }
</style>
